import React from "react";
import { Layout, Dropdown, Avatar } from "antd";
import { UserOutlined } from "@ant-design/icons";

const { Header } = Layout;

const AppHeader = ({ isAdmin }) => {
  const items = [
    {
      key: "1",
      label: "个人中心",
    },
    {
      key: "2",
      label: "退出系统",
    },
  ];

  return (
    <Header
      style={{
        background: "#fff",
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        padding: "0 24px",
        boxShadow: "0 1px 4px rgba(0,21,41,.08)",
      }}
    >
      <div style={{ fontWeight: "bold", fontSize: "18px" }}>
        {isAdmin ? "宾馆管理系统 - 管理员" : "宾馆系统 - 客户"}
      </div>

      <Dropdown menu={{ items }} placement="bottomRight">
        <div
          style={{ cursor: "pointer", display: "flex", alignItems: "center" }}
        >
          <Avatar icon={<UserOutlined />} />
          <span style={{ marginLeft: 8 }}>{isAdmin ? "管理员" : "客户"}</span>
        </div>
      </Dropdown>
    </Header>
  );
};

export default AppHeader;
